<template>
	<view class="container">
		<view class="header">
			<view class="amount">￥{{amount}}.00</view>
			<view class="title">服务费发票（元）</view>
		</view>
		<view class="view-check">
			<view class="check">
				<view class="check-item" :class="{'active':active}" @click="handleClickCheck(true)">个人</view>
				<view class="check-item" :class="{'active':!active}" @click="handleClickCheck(false)">单位</view>
			</view>
		</view>
		<u-form :model="form" ref="uForm" :border-bottom="false" label-width="150">
			<u-form-item label="名称" prop="title">
				<u-input v-model="form.title" placeholder="抬头名称（可检索）" />
			</u-form-item>
			<u-form-item v-if label="税号" prop="taxNum">
				<u-input v-model="form.taxNum" placeholder="15-20位（企业报销时必报）" />
			</u-form-item>
			<view v-if="!active">
				<u-form-item label="单位地址" prop="address">
					<u-input v-model="form.address" placeholder="请输入公司地址" />
				</u-form-item>
				<view style="width: 100%;height: 20upx;background-color: #F5F5F9;"></view>
				<u-form-item label="电话号码" prop="phone">
					<u-input v-model="form.phone" placeholder="公司电话" />
				</u-form-item>
				<u-form-item label="开户银行" prop="bankName">
					<u-input v-model="form.bankName" placeholder="开户银行" />
				</u-form-item>
				<u-form-item label="银行账户" prop="bankAccount">
					<u-input v-model="form.bankAccount" placeholder="银行账户" />
				</u-form-item>
			</view>
			<view class="item-header">
				接收方式
			</view>
			<u-form-item label="电子邮箱" prop="mail" label-width="150">
				<u-input v-model="form.mail" placeholder="请输入电子邮箱" />
			</u-form-item>
		</u-form>
		<u-toast ref="uToast" />
		<view class="btn" @click="submit">确认申请</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				row: {},
				ids: [],
				amount: 0,
				active: true,
				form: {
					title: '',
					taxNum: '',
					address: '',
					phone: '',
					bankName: '',
					bankAccount: '',
					mail: '',
				},
				rules: {
					title: [{
						required: true,
						message: '请输入抬头',
						trigger: ['change', 'blur'],
					}],
					taxNum: [{
						required: true,
						message: '请输入税号',
						trigger: ['change', 'blur']
					},
					{ min: 15, max: 20, message: '长度在 15 到 20 个字符' }],
					address: [{
						required: true,
						message: '请输入单位地址',
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请输入电话号码',
						trigger: ['change', 'blur'],
					}],
					bankName: [{
						required: true,
						message: '请输入开户银行',
						trigger: ['change', 'blur'],
					}],
					bankAccount: [{
						required: true,
						message: '请输入银行账户',
						trigger: ['change', 'blur'],
					}],
					mail: [{
						required: true,
						message: '请输入电子邮箱',
						trigger: ['change', 'blur'],
					}, {
						validator: function(rule, value, callback) {
							if (
								/^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
									value
								) == false
							) {
								callback(new Error("邮箱格式错误"));
							} else {
								callback();
							}
						},
						trigger: "blur"
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.row = JSON.parse(option.row);
			this.row.map(val => {
				if (val.checked) {
					this.amount += val.money
					this.ids.push(val.id)
				}
			})
			console.log('option', this.ids)
		},
		methods: {
			async saveInvoice() {
				if (this.active) {
					this.form.type = 0;
				} else {
					this.form.type = 1;
				}
				this.form.money = this.amount;
				this.form.orderPayId = this.ids.join(',')
				let data = await this.$apis.saveInvoice(this.form);
				if (data.code === 200) {
					this.$refs.uToast.show({
						title: '申请成功',
						type: 'success',
						back: 'true'
					})
					console.log('data.data', data.data);
				}

			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.saveInvoice();
					} else {
						console.log('验证失败');
					}
				});
			},
			handleClickCheck(e) {
				this.active = e
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.container {
		.btn {
			width: 662upx;
			height: 80upx;
			border-radius: 40upx;
			background-color: #AC62FF;
			color: #fff;
			line-height: 80upx;
			text-align: center;
			margin: 100upx 0 77upx 44upx;
		}

		.u-form {
			background-color: #fff;

			.item-header {
				height: 86upx;
				line-height: 86upx;
				background-color: #f4f4f4;
				padding-left: 40upx;
				color: #888E9A;
			}

			.u-form-item {
				padding-left: 30upx;
				padding-right: 30upx;
				border: none;
			}
		}

		.view-check {
			background-color: #fff;
			height: 110upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: #f4f4f4 solid 1upx;

			.check {
				width: 460upx;
				height: 64upx;
				display: flex;
				background-color: #F0F0F0;
				border-radius: 32upx;

				.check-item {
					width: 230upx;
					text-align: center;
					line-height: 64upx;
					border-radius: 32upx;
					color: #AB62FF;
				}

				.active {
					color: #fff;
					background-color: #AB62FF;
				}
			}
		}

		.header {
			width: 100%;
			height: 160upx;
			background-color: #AC62FF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.amount {
				color: #fff;
				font-size: 52upx;
			}

			.title {
				color: #fff;
				font-size: 24upx;
			}
		}
	}
</style>
